<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2,
        p {
            margin: 0;
        }    
        .box {
            margin: 30px auto;
            width: 300px;    
        }
        #user,
        #message {
            box-sizing: border-box;
            width: 300px;
            border: 1px solid #000;
            padding: 10px;
            height: 100px;
            resize: none;
            display: block;
        }
        #user {
            padding: 0 10px;
            height: 30px;
            margin-bottom: 10px;
        }
        #btn {
            display: block;
            margin: 10px auto;
            width: 60%;
            height: 40px;
        }
        #list {
            border-top: 1px solid #000;
            padding: 10px 0 0;
            margin: 0;
            list-style: none;
        }
        #list li {
            position: relative;
            font: 14px/30px "宋体";
            border-bottom: 1px solid #000;
            padding: 0 15px;
            overflow: hidden;
        }
        .clos {
            position: absolute;
            right: 5px;
            top: 10px;
        }
        .clos2 {
            position: absolute;
            right: 5px;
            top: 30px;
        }
        .replay{
            position:absolute;
            right: 5px;
            top: 35px;
        }
        .mask{
            width: 100vw;
            height: 100vh;
            background: black;
            opacity: .3;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .comfirm{
            width: 200px;
            height: 120px;
            background: white;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 30%;
            border-radius: 5px;
            transform: translate(-50%,-50%);
            overflow: hidden;
            display: none;
            
        }
        .comfirm button{
            /* position: absolute; */
            /* right: 10px; */
            float:right;
            margin-top: 20px;
            margin-right: 10px;
        }
        .replyMsg{
            display: none;
        }
        .replyMsg2{
            display:block;
        }
        .replyMsg textarea{
            width: 275px;
            height: 80px;
        }
        
    </style>
    <script src="./ajax.js"></script>
</head>
<body>
    <div class="box">
        <input type="text" id="user" value="小明" />
        <textarea id="message">我就是传说中的无敌小明</textarea>
        <button id="btn">提交留言</button>
        <ul id="list">
            <!-- <li style="height: auto">
                <h2 class="user">小王说:</h2>
                <p>呼叫无敌小明</p>
                
                <a href="javascript:;" class="clos">删除</a>
                <a href="javascript:;" class="clos2">回复</a>
            </li>
            <li style="height: auto">
                <h2 class="user">老师说:</h2>
                <p>小明滚出去</p>
                <p>回复的内容</p>
                <a href="javascript:;" class="clos">删除</a>
            </li> -->
        </ul>
    </div>
    <script>
        getList();

        function replyMsg(uid,username,content,msgEle){
            ajax({
                url:"reply.php",
                method:"post",
                dataType:"json",
                data:{
                    replyId:uid,
                    replyUser:username,
                    replyMsg:content,
                },
                success(data){
                    if( data["status"] == 1 ){
                        alert("回复成功");
                        msgEle.classList.toggle("replyMsg2");
                    }
                }
            });
        }

        function addMsg(){
            let userEle = document.querySelector("#user");
            let messageEle = document.querySelector("#message");
            let btnEle = document.querySelector("#btn");
            btnEle.onclick = function (){
                let user = userEle.value; 
                let message = messageEle.value;
                ajax({
                    url:"addmsg.php",
                    method:"post",
                    dataType:"json",
                    data:{
                        user,
                        message,
                    },
                    success(data){
                        if( data["status"] == 1 ){
                            alert("添加成功");
                            getList();
                        }
                    }
                });
            }
        }

        function getList(){
            let listEle = document.querySelector("#list");
            ajax({
                url:"umsg.php",
                method:"post",
                dataType:"json",
                success(data){
                    renderDom(data,listEle);
                    addMsg();
                }
            });
        }

        function renderDom(data,ele){
            ele.innerHTML = '' ;
            data.forEach(function(item,key){
                let liEle = document.createElement("li");
                liEle.innerHTML = `<h2 class="user">${item.username}:</h2>
                             <p>${item.msg}</p>
                             <a href="javascript:;" myid="${item.id}" class="clos">删除</a>
                             <a href="javascript:;" class="clos2">回复</a>
                             <div class="replyMsg">
                                <span>回复人</span>
                                <input type="text" style="width=50px">
                                <textarea></textarea>
                                <button class="replyBtn" myid="${item.id}">确认</button>
                                <button class="cancel">取消</button>
                             </div>
                            ` ;
                let replyEle = liEle.querySelector(".clos2");
                let msgEle = liEle.querySelector(".replyMsg");
                let cancelBtn = liEle.querySelector(".cancel");
                let replyBtn = liEle.querySelector(".replyBtn");
                replyEle.onclick = function (){
                    msgEle.classList.toggle("replyMsg2");
                }
                cancelBtn.onclick = function (){
                    msgEle.classList.toggle("replyMsg2");
                }
                replyBtn.onclick = function (){
                    let uid = this.getAttribute("myid");
                    let username = liEle.querySelector(".replyMsg > input").value;
                    let content = liEle.querySelector(".replyMsg > textarea").value;
                    // console.log(uid,username,content);
                    replyMsg(uid,username,content,msgEle);
                }
                ele.appendChild(liEle);
            }); 
        }
        // function getSearch(obj){
        //     str = '' ;
        //     for( let key in obj ){
        //         str = str+key+"="+obj[key]+"&";
        //     }
        //     str = str.substr(0,str.length-1);
        //     return str ; 
        // }
        // obj={name:"xiaoming",age:"30"};
        // console.log(getSearch(obj));
    </script>
</body>
</html>